<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;display: flex; flex-direction: row;justify-content: space-between;">
      <div style="display: flex;">
        <div style="display: flex;align-items: center;">
          <div>医生：</div>
          <div>
            <el-input
              v-model="search.doctorName"
              clearable
              size="small"
              placeholder="输入医生名称搜索"
              prefix-icon="el-icon-search"
              class="filter-item"
            />
          </div>
        </div>
      
        <div style="display: flex;align-items: center;margin-left:20px">
          <div>科室：</div>
          <div>
            <el-input
              v-model="search.deptName"
              clearable
              size="small"
              placeholder="输入部门名称搜索"
              prefix-icon="el-icon-search"
              class="filter-item"
            />
          </div>
        </div>

        <div style="display: flex;align-items: center;margin-left: 10px;">

          <div class="block">
            <span class="demonstration">周</span>
            <el-date-picker
              v-model="date"
              @change="selectDateChange"
              type="week"
              format="yyyy 第 WW 周"
              placeholder="选择周">
            </el-date-picker>
          </div>
          <!-- <el-radio v-model="type" label="本周排班">本周排班</el-radio>
          <el-radio v-model="type" label="下周排班">下周排班</el-radio> -->
        </div>
      </div>
      <div>
        <el-button  type="primary" @click="initData">搜索</el-button>
      </div>
    </div>


    <el-tabs style="margin-bottom: 0px;" v-model="branchCode" @tab-click="tabsClick">
      <el-tab-pane label="光华" name="光华"></el-tab-pane>
      <el-tab-pane label="柳林" name="柳林"></el-tab-pane>
    </el-tabs>
    <el-table
      :data="tableData"
      border
      :key="tableK"
      style="width: 100%">
      <el-table-column
          prop="name"
          label="姓名"
          width="80">
      </el-table-column>
      <el-table-column
          prop="deptName"
          label="科室"
          width="80">
      </el-table-column>
      <el-table-column
          label="费用"
          width="120">
          <template slot-scope="{row}">
            <div>挂号费{{ row.registerMoney }}
              <!-- <el-input-number size="mini" :controls="false" v-model="row.registerMoney"></el-input-number> -->
            </div>
            <div>诊疗费{{ row.diagnosisMoney }}
              <!-- <el-input-number size="mini" :controls="false" v-model="row.diagnosisMoney"></el-input-number> -->
            </div>
            <el-button type="text" style="padding: 0;" @click="showUpdateRegisterMoney(row)">编辑</el-button>
          </template>
      </el-table-column>
      <el-table-column
          label="挂号种类"
          width="120">
          <template slot-scope="{row}">
            <el-select v-model="row.regType" @change="(item) => changeRegType(row, item)">
              <el-option v-for="(item, key) in registerTypeList" :key="key" :label="item" :value="key"></el-option>
            </el-select>
          </template>
      </el-table-column>

      <el-table-column
        v-for="item in dateList"
        :key="item.id">
        <template slot="header" slot-scope="scope">
          <div style="text-align: center;">{{item.label}}</div>
          <div style="text-align: center;">{{item.date}}</div>
        </template>
        <template slot-scope="scope">
          <div style="display: flex;justify-content: center;">
            <span> 上午班：</span>
            <!-- {{ scope.row[item.date+'/'+1] }} -->
            <el-switch
              @change="changeSwitch($event,scope.row,item, 1)"
              v-model="scope.row[item.date+'/'+1]"
              active-color="#13ce66">
            </el-switch>
          </div>


          <div style="display: flex;justify-content: center;">
            <span> 下午班：</span>
            <!-- {{ scope.row[item.date+'/'+2] }} -->
            <el-switch
              @change="changeSwitch($event,scope.row,item,2)"
              v-model="scope.row[item.date+'/'+2]"
              active-color="#13ce66">
            </el-switch>
          </div>
          <!-- <div style="display: flex;justify-content: center;">
            <span style="width: 48px;"> 晚班：</span>
            <el-switch
              @change="changeSwitch($event,scope.row,item,3)"
              v-model="scope.row[item.date+'/'+3]"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div> -->
        
          
        </template>
      </el-table-column>

      

    </el-table>
    <div class="block">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageNoChange"
        :current-page.sync="page.pageNo"
        :page-size="page.pageSize"
        layout="total, prev, pager, next"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" label-width="100px">
        <el-form-item label="姓名：">
          {{ updateRow.name }}
        </el-form-item>
        <el-form-item label="科室：">
          {{ updateRow.deptName }}
        </el-form-item>
        <el-form-item label="挂号费：">
          <el-input-number size="mini" style="width: 80%;" v-model="updateRow.registerMoney" controls-position="right" :min="1" :step="1"></el-input-number>元
        </el-form-item>
        <el-form-item label="诊疗费：">
          <el-input-number size="mini" style="width: 80%;" v-model="updateRow.diagnosisMoney" controls-position="right" :min="1" :step="1"></el-input-number>元
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getWeekDataList,dateToStr } from '@/utils/date.js'
import { deepCopy,isEmptyData } from '@/utils/assist.js'
import { getSchedule,deleteSchedule,insertSchedule,updateSchedule, updateregister } from '@/api/schedule/schedule.js'
import { search } from 'core-js/fn/symbol';

const registerTypeList = {
  '101': '便民门诊',
  '102': '普通门诊诊查费',
  '103': '急诊诊查费',
  '104': '普通门诊中医辨证论治',
  '106': '专家门诊',
  '1002': '健康管理'
}
export default {
  name: 'doctorSchedule',
  components: { },
  // 数据字典
  data() {
    return {
      registerTypeList,
      height: document.documentElement.clientHeight - 180 + 'px;',
      tableData:[],
      dialogVisible: false,
      updateRow: {}, // 正在被编辑的行
      dateList:{
        date:"",
        label:"",
      },
      page:{
        total:0,
        pageSize:10,
        pageNo:1,
      },
      // 搜索条件
      search : {
        "doctorName":null,
        "deptName":null
      },
      // 1.本周排版 2 下周排班
      date: "",
      branchCode:"光华",
      tableK: 1
    }
  },
  computed: {
  },
  created() {

    
  },
  mounted: function() {
    const that = this;
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + 'px;'
    }
    
    this.selectDateChange(new Date());
    this.initData();
  },
  methods: {
    changeRegType(row, item) {
      const data = {
        ...row,
        regType: item
      }
      updateregister(data).then(res => {
        this.initData();
      })
    },
    tabsClick(val){
      this.page.pageNo = 1;
      this.branchCode = val.name;
      this.initData();
    },
    /**
     * 日期改变选择
     */
    selectDateChange(date) {
      this.date = date;
      this.setHearderDate(date);
    },
    /**
     * 
     * 设置日期表头数据 
     */
    setHearderDate(date) {
      let dateList_ = getWeekDataList(date);
      this.dateList = [];
      dateList_.forEach((item_,index) => {
        let item = {};
        if(index == 0) {
          item.label = "周一";
        }
        if(index == 1) {
          item.label = "周二";
        }
        if(index == 2) {
          item.label = "周三";
        }
        if(index == 3) {
          item.label = "周四";
        }
        if(index == 4) {
          item.label = "周五";
        }
        if(index == 5) {
          item.label = "周六";
        }
        if(index == 6) {
          item.label = "周日";
        }
        item.date = item_;
        this.dateList.push(item);
      });  
    },
    /**
     * 初始化查询排版
     * */
    initData() {
      this.tableK++
      this.getDoctorScheDule();
    },
    /**
     * 查询排班
     */
    getDoctorScheDule() {
      let data = {};
      data.queryStartTime = this.dateList[0].date;
      data.queryEndTime = this.dateList[6].date;
      data.hospitalId = 1;
      data.pageNo = this.page.pageNo;
      data.pageSize = this.page.pageSize;
      data.branchCode = this.branchCode;
      if(!isEmptyData(this.search.doctorName)) {
        data.name = this.search.doctorName;
      }

      if(!isEmptyData(this.search.deptName)) {
        data.deptName = this.search.deptName;
      }
      getSchedule(data).then(res => {
        this.tableData = [];
        this.tableData = res.records;

        this.tableData = this.tableData.map(item => {
          this.dateList.forEach(ite => {
            item[ite.date+'/'+1] = (item.sourceInfoList || []).find(ite_ => ite_.execDate == ite.date && ite_.type ===1) && (item.sourceInfoList || []).find(ite_ => ite_.execDate == ite.date && ite_.type ===1).typeStatus
            item[ite.date+'/'+2] = (item.sourceInfoList || []).find(ite_ => ite_.execDate == ite.date && ite_.type ===2) && (item.sourceInfoList || []).find(ite_ => ite_.execDate == ite.date && ite_.type ===2).typeStatus
            item[ite.date+'/'+3] = (item.sourceInfoList || []).find(ite_ => ite_.execDate == ite.date && ite_.type ===3) && (item.sourceInfoList || []).find(ite_ => ite_.execDate == ite.date && ite_.type ===3).typeStatus
          })

          return {
            ...item,
          }
        })

        console.log(this.tableData)
        this.page.total = res.total
      }).catch((e) => {

      })
    },

    /**
     * 选择器改变
     */
    changeSwitch(e,row,item, type) {
      this.changeSchedule(e,row,item, type);
    },
    /**
     * 修改排班
     **/
    changeSchedule(val,row,item, type) {
        // item.typeStatus = val;

        if ((row.sourceInfoList || []).find(item_ => item_.execDate == item.date && item_.type == type)) {
          const data = {
            ...row.sourceInfoList.find(item_ => item_.execDate == item.date && item_.type == type),
            typeStatus: val
          }
          updateSchedule(data).then(res => {
            this.initData();
          }).catch((e) => {

          })
        } else {
          console.log(row)
          const data = {
            branchCode: row.branchCode,
            code: row.code,
            deptCode: row.deptCode,
            deptName: row.deptName,
            hospitalId: row.hospitalId,
            jobTitle: row.hospitalId,
            name: row.name,
            gender: row.gender,
            execDate: item.date,
            type,
            registerMoney: row.registerMoney*1,
            diagnosisMoney: row.diagnosisMoney*1
          }
          insertSchedule(data).then(res => {
            this.initData();
          }).catch((e) => {

          })
        }
        
       
     },
    /**
     * 通过下表获取周几
     */
    dateListTolabel(i) {
      return this.dateList[i].label;
    },


    showUpdateRegisterMoney(row) {
      this.dialogVisible = true;
      this.updateRow = JSON.parse(JSON.stringify(row))
    },

    sub() {
      if (!this.updateRow.registerMoney || !this.updateRow.diagnosisMoney) return this.$message.error('请输入金额')
      const data = {
        id: this.updateRow.id,
        registerMoney: this.updateRow.registerMoney,
        diagnosisMoney: this.updateRow.diagnosisMoney
      }
      updateregister(data).then(res => {
        this.$message.success('修改成功')
        this.dialogVisible = false
        this.initData()
      })
    },

    pageSizeChange(val){
      this.page.pageSize = val;
      this.initData();
    },
    pageNoChange(val){
      this.page.pageNo = val;
      this.initData();
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
